<template>
    <div class="bigBox">
        
      <div class="main">
        <div class="title">Wchime智能家居管理系统</div>
          <div class="login-form">
              <h1>登录</h1>
                      
                  <form>
                          <input type="text" class="text" v-model="loginname" placeholder='账号' >
                          <input type="password" v-model="password" placeholder='密码' >
                          <div class="submit">
                              <input type="button" @click="login"  value="登录" >
                      </div>	
                      <!-- <p><a href="#">Forgot Password ?</a></p> -->
                  </form>
              </div>
              
          </div>
      <div class="tips" style="text-align: center; margin-top: 100px;"><a style="text-decoration:none;" href="https://beian.miit.gov.cn/">桂ICP备2022009991号-1</a></div>
   </div>
  </template>
  
  <script>
//   import {apiLogin} from '@/api/dataApi'
//   import router from '@/router/index'
  import {reqLogin} from '@/api/basicReq'
  import {setDataAes, getDataAes} from '@/webencrypt/index'

  export default {
    name: 'Login',
    components: {
      
    },
    data() {
      return {
          loginname: null,
          password: null,
          relogin:0
      }
    },
    methods:{
      login(){
          // console.log(this.username, this.userpwd)
          if(this.loginname==null){
              this.$message.warning('请输入账号')
          }else{
            if(this.password==null){
              this.$message.warning('请输入密码')
            }else{
              var data = {
              "username": this.loginname,
              "password": this.password
          }
          var secret = cfg.secret
          var jsondata = JSON.stringify(data)
          var encData = setDataAes(secret, jsondata)
          
          var reqData = {
            'data': encData
          }
          // console.log(cfg)
      //     var config = {
      //     url:'user/UserLogin',
      //     method:'post',
      //     data : reqData
      // }
          // reqLogin(config).then((res)=>{
          //   console.log(res)
          //     if (res.code == 1){
            
          //   // this.$router.push('/clothing')
          // //   router.push('/clothing')
           
          //   this.$message.success('登录成功')
					// 	setToken(res.token)
					// 	setUserInfo(res.data[0])
          //   // console.log(res)
          // }else{
          //   this.$message.error('登录失败')
          //   // console.log("登录失败")
          // }
          // })
          this.$store
            .dispatch('user/Login', reqData)
            .then((res) => {
              //console.log(res)
              
              this.$router.push({ path: '/home' })
              
            })
            .catch(() => {
              // console.log('fdsf')
             
            })
            }
          }
  
  
      },
  
    },
  created() {
    

      document.onkeydown =(e) => {
        e = window.event || e;
        if(this.$route.path=='/login'&&(e.code=='Enter'||e.code=='enter')){
        //调用登录事件方法
          this.login();
        }
      }

      // this.relogin = this.$route.query.relogin
      // if(this.relogin==1){
      //   this.$message.error('请重新登录!')
      //   this.relogin = 0
      // }
    },
  mounted(){
    
  }
  
  }
  
  </script>
  <style scoped>
  

a{text-decoration:none;}



.login-form {
	background: #e9eaeb;;
	width: 26%;
	margin:5% auto 4% auto;
 	position: relative;

}

.main{
	position:relative;
}
.main h1{
	font-size:25px;
	color:#676767;
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	padding-top: 19%;
	text-align: center;
}
.main form {
	width: 80%;
	margin: 0 auto;
	padding: 6% 0 9% 0;
}
.main p {
text-align: center;
}
.main form p a {
	color: #888;
	font-family: 'Open Sans', sans-serif;
}

 input[type="text"], input[type="password"]{
	text-align:left;
	position: relative;
	width:92%;
	padding:3%;

	margin-bottom: 6%;
	font-family: 'Open Sans', sans-serif;
	
	font-weight:600;
	font-size: 16px;
	outline: none;
	border: none;
	border-radius: 5px;
	border:1px solid #DED6D6;
	-webkit-appearance:none;
}
 input[type="text"]:hover, input[type="password"]:hover{
 	border:1px solid #949494;
	transition:0.5s;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	-o-transition:0.5s;
	-ms-transition:	0.5s;
 	
 }
input[type="button"]{
	width: 99%;
	padding: 3%;
	margin-bottom: 8%;
	background: rgb(52, 134, 228);
	font-family: 'Open Sans', sans-serif;
	
	font-size: 20px;
	outline: none;
	border: none;
	cursor: pointer;
	font-weight:500;
	border-radius: 5px;
	transition: 0.5s;
	-webkit-appearance:none;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
}
input[type="button"]:hover{
	background:#2464a0;
	color:#fff;
}

.bigBox {
    /* 溢出隐藏 */
    height: 100vh;
    overflow-x: hidden;
    /* display: flex; */
    /* 渐变方向从左到右 */
    background: linear-gradient(to right, rgb(124, 147, 221), rgb(191, 227, 241));
}
.title{
    margin-top: 3%;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    /* 文字间距 */
    letter-spacing: 5px;
    color: white;
    /* 禁止选中 */
    user-select: none;
    /* 文字阴影 */
    text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
}
  </style>
  